<template>
  <div class="event-description">
    <!-- 事件描述 -->
    <div class="form-section">
      <div class="section-header">
        <i class="el-icon-document"></i>
        <span>事件详细描述</span>
      </div>
      <div class="form-content">
        <div class="form-item">
          <label>事件起因</label>
          <el-input 
            v-model="formData.eventCause" 
            type="textarea"
            :rows="4"
            placeholder="请详细描述事件的起因和背景"
            maxlength="1000"
            show-word-limit
          ></el-input>
        </div>

        <div class="form-item">
          <label>影响范围</label>
          <el-input 
            v-model="formData.affectedArea" 
            type="textarea"
            :rows="3"
            placeholder="请描述事件的影响范围和波及区域"
            maxlength="500"
            show-word-limit
          ></el-input>
        </div>

        <div class="form-item">
          <label>当前态势</label>
          <el-input 
            v-model="formData.currentSituation" 
            type="textarea"
            :rows="3"
            placeholder="请描述事件的当前发展态势"
            maxlength="500"
            show-word-limit
          ></el-input>
        </div>
      </div>
    </div>

    <!-- 防控措施 -->
    <div class="form-section">
      <div class="section-header">
        <i class="el-icon-s-flag"></i>
        <span>防控措施记录</span>
      </div>
      <div class="form-content">
        <div class="form-item">
          <label>已采取措施</label>
          <el-input 
            v-model="formData.takenMeasures" 
            type="textarea"
            :rows="4"
            placeholder="请详细记录已经采取的防控措施"
            maxlength="1000"
            show-word-limit
          ></el-input>
        </div>

        <div class="form-item">
          <label>计划措施</label>
          <el-input 
            v-model="formData.plannedMeasures" 
            type="textarea"
            :rows="3"
            placeholder="请记录计划采取的后续措施"
            maxlength="500"
            show-word-limit
          ></el-input>
        </div>

        <div class="form-item">
          <label>物资调配情况</label>
          <el-input 
            v-model="formData.materialAllocation" 
            type="textarea"
            :rows="3"
            placeholder="请记录物资调配和使用情况"
            maxlength="500"
            show-word-limit
          ></el-input>
        </div>

        <div class="form-item">
          <label>人员安排</label>
          <el-input 
            v-model="formData.staffArrangement" 
            type="textarea"
            :rows="3"
            placeholder="请记录人员部署和分工安排"
            maxlength="500"
            show-word-limit
          ></el-input>
        </div>
      </div>
    </div>

    <!-- 附件上传 -->
    <div class="form-section">
      <div class="section-header">
        <i class="el-icon-picture"></i>
        <span>附件资料</span>
      </div>
      <div class="form-content">
        <div class="upload-area">
          <div class="upload-tip">
            <i class="el-icon-upload"></i>
            <p>点击上传图片、文档等附件</p>
            <p class="tip-text">支持jpg、png、pdf、doc等格式，单个文件不超过10MB</p>
          </div>
          
          <div v-if="attachments.length > 0" class="attachment-list">
            <div 
              v-for="(file, index) in attachments" 
              :key="index"
              class="attachment-item"
            >
              <div class="file-icon">
                <i :class="getFileIcon(file.type)"></i>
              </div>
              <div class="file-info">
                <div class="file-name">{{ file.name }}</div>
                <div class="file-size">{{ file.size }}</div>
              </div>
              <el-button 
                type="text" 
                icon="el-icon-delete"
                @click="removeAttachment(index)"
                class="delete-btn"
              ></el-button>
            </div>
          </div>

          <el-button 
            type="primary" 
            icon="el-icon-upload2"
            @click="handleUpload"
            plain
            style="width: 100%; margin-top: 15px;"
          >
            添加附件
          </el-button>
        </div>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <el-button 
        type="default" 
        size="large"
        @click="handleReset"
        style="flex: 1;"
      >
        重置
      </el-button>
      <el-button 
        type="primary" 
        size="large"
        @click="handleSave"
        style="flex: 2;"
      >
        保存描述与措施
      </el-button>
    </div>
  </div>
</template>

<script>
import { saveEventDescription } from './service';

export default {
  name: 'EventDescription',
  
  data() {
    return {
      formData: {
        eventCause: '',
        affectedArea: '',
        currentSituation: '',
        takenMeasures: '',
        plannedMeasures: '',
        materialAllocation: '',
        staffArrangement: ''
      },
      attachments: []
    };
  },

  methods: {
    handleSave() {
      if (!this.formData.eventCause) {
        this.$message.warning('请输入事件起因');
        return;
      }

      const loading = this.$loading({
        lock: true,
        text: '保存中...',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      const data = {
        ...this.formData,
        attachments: this.attachments
      };

      saveEventDescription(data)
        .then(() => {
          loading.close();
          this.$notify({
            title: '✅ 保存成功',
            message: '事件描述及措施已保存',
            type: 'success',
            duration: 2000,
            position: 'top-right',
            offset: 60
          });
          this.handleReset();
        })
        .catch(error => {
          loading.close();
          this.$message.error(error.message || '保存失败');
        });
    },

    handleReset() {
      this.formData = {
        eventCause: '',
        affectedArea: '',
        currentSituation: '',
        takenMeasures: '',
        plannedMeasures: '',
        materialAllocation: '',
        staffArrangement: ''
      };
      this.attachments = [];
      this.$message.info('表单已重置');
    },

    handleUpload() {
      // 模拟文件上传
      const mockFiles = [
        { name: '现场照片1.jpg', size: '2.3MB', type: 'image' },
        { name: '应急预案.pdf', size: '1.5MB', type: 'pdf' },
        { name: '处置报告.doc', size: '800KB', type: 'doc' }
      ];
      
      const randomFile = mockFiles[Math.floor(Math.random() * mockFiles.length)];
      this.attachments.push({
        ...randomFile,
        uploadTime: new Date().toLocaleString()
      });
      
      this.$message.success('附件上传成功');
    },

    removeAttachment(index) {
      this.attachments.splice(index, 1);
      this.$message.info('附件已移除');
    },

    getFileIcon(type) {
      const iconMap = {
        'image': 'el-icon-picture',
        'pdf': 'el-icon-document',
        'doc': 'el-icon-document',
        'excel': 'el-icon-s-grid'
      };
      return iconMap[type] || 'el-icon-document';
    }
  }
};
</script>

<style scoped>
.event-description {
  background: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 80px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.form-section {
  background: white;
  margin-bottom: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.section-header {
  display: flex;
  align-items: center;
  padding: 15px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 16px;
  font-weight: 600;
}

.section-header i {
  font-size: 20px;
  margin-right: 8px;
}

.form-content {
  padding: 15px;
}

.form-item {
  margin-bottom: 20px;
}

.form-item:last-child {
  margin-bottom: 0;
}

.form-item label {
  display: block;
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
  font-weight: 500;
}

/* 上传区域 */
.upload-area {
  padding: 10px;
}

.upload-tip {
  text-align: center;
  padding: 30px 20px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 2px dashed #dcdfe6;
}

.upload-tip i {
  font-size: 48px;
  color: #409EFF;
  margin-bottom: 10px;
}

.upload-tip p {
  margin: 5px 0;
  color: #666;
  font-size: 14px;
}

.tip-text {
  font-size: 12px !important;
  color: #999 !important;
}

.attachment-list {
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.attachment-item {
  display: flex;
  align-items: center;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  transition: all 0.3s;
}

.attachment-item:active {
  background: #e9ecef;
}

.file-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #409EFF;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
}

.file-icon i {
  font-size: 20px;
  color: white;
}

.file-info {
  flex: 1;
  min-width: 0;
}

.file-name {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-size {
  font-size: 12px;
  color: #999;
}

.delete-btn {
  color: #F56C6C;
  font-size: 18px;
  flex-shrink: 0;
}

/* 操作按钮 */
.action-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 15px;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  z-index: 100;
  display: flex;
  gap: 10px;
}

.action-buttons .el-button {
  border-radius: 6px;
  font-size: 15px;
  height: 46px;
  font-weight: 500;
}
</style>

